<template>
  <div class="queryForm">
    <el-form :inline="true" :model="queryFrom" class="demo-form-inline">
      <el-form-item label="作业名称">
        <el-input stytle="230px" v-model="queryFrom.user" placeholder="" clearable/>
      </el-form-item>
      <el-form-item label="作业状态">
        <el-select
            v-model="queryFrom.region"
            clearable
            stytle="230px"
        >
          <el-option label="启用" value="ON"/>
          <el-option label="通用" value="OFF"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">
          <el-icon>
            <Search/>
          </el-icon>
          查询
        </el-button>
        <el-button type="primary" @click="reset">
          <el-icon>
            <Refresh/>
          </el-icon>
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
  <div >
    <vxe-table :data="tableData" class="tableData" style="width: 100%" border >
      <vxe-column align="center" type="seq" title="序号" width="5%" />
      <vxe-column align="center" field="作业名称" title="作业名称" width="10%"/>
      <vxe-column align="center" field="作业状态" title="作业状态"  width="10%"/>
      <vxe-column align="center" field="业务负责人" title="业务负责人"  width="10%"/>
      <vxe-column align="center" field="作业描述" title="作业描述"   width="15%"/>
      <vxe-column align="center" field="分类标签" title="分类标签"  width="10%" />
      <vxe-column align="center" field="更新人" title="更新人"  width="10%"/>
      <vxe-column align="center" field="更新时间" title="更新时间"  width="10%"/>
      <vxe-column align="center" title="操作"  width="20%">
        <template #default="scope">
          <el-button size="small" type="danger" @click="handleEdit(scope.row)">
            <el-icon class="icon-class">
              <Plus />
            </el-icon>
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">
            <el-icon class="icon-class">
              <FolderAdd />
            </el-icon>
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">
            <el-icon class="icon-class">
              <Lock />
            </el-icon>
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">
            <el-icon class="icon-class">
              <Edit />
            </el-icon>
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">
            <el-icon class="icon-class">
              <Delete />
            </el-icon>
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">
            <el-icon class="icon-class">
              <Document/>
            </el-icon>
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">
            <el-icon class="icon-class" >
              <Pointer/>
            </el-icon>
          </el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-pager
        background
        size="small"
        :loading="loading3"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalResult"
        :page-sizes="[10, 20, 100, {label: '大量数据', value: 1000}, {label: '全量数据', value: -1}]"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
        @page-change="handlePageChange3">
    </vxe-pager>
  </div>
  <div>

  </div>
</template>

<script lang="ts">
import taskWorkController from '../controller/taskWorkController';

export default taskWorkController;
</script>
<style scoped>
.queryForm {
  display: flex;
  padding: 10px;
  :deep(.el-select__wrapper) {
    width: 230px;
  }
}

.tableData {
  height: calc(100vh - 180px);
}

.icon-class {
  size: 15;
}
</style>
